<template>
  <div>
    <el-input
      v-model="modelVal"
      :placeholder="placeholder"
      clearable
      readonly
      @click="handleOpenDialog"
      :disabled="disabled"
    >
      <template #suffix>
        <el-icon
          @click.stop="handleClear"
          v-if="modelVal"
          style="cursor: pointer"
          ><CircleCloseFilled
        /></el-icon>
      </template>
    </el-input>
    <basic-dialog
      v-model="visible"
      :title="title"
      :auto-close="false"
      @submit="handleSubmit"
    >
      <div class="row">
        <div class="row_label">函数体</div>
        <div class="row_value fun_json">
          ({{ mergeComProps.params }}) => {
          <el-input
            class="customInput"
            v-model="funBodyJson"
            type="textarea"
            :autosize="{ minRows: 10 }"
          ></el-input>
          }
        </div>
      </div>
      <div class="row">
        <div class="row_label">参数说明</div>
        <div class="row_value">
          <ul>
            <li
              v-for="item in mergeComProps.paramListDes"
              :key="item.paramName"
              style="display: flex"
            >
              <div class="paramName">{{ item.paramName }}：</div>
              <div class="paramDes">{{ item.paramDes }}</div>
            </li>
          </ul>
        </div>
      </div>
    </basic-dialog>
  </div>
</template>

<script setup>
import { merge } from 'lodash'
import { computed } from 'vue'
const props = defineProps({
  placeholder: {
    type: String,
    default: '请选择',
  },
  title: {
    type: String,
    default: '定义函数的内容',
  },
  // params: {
  //   type: String,
  //   default: '',
  // },
  // paramListDes: {
  //   type: Array,
  //   default: () => [],
  // },
  disabled: Boolean,
  comProps: {
    type: Object,
    default: () => ({}),
  },
})

const defaultComProps = {
  paramListDes: [],
  params: '',
}
const mergeComProps = computed(() => merge({}, defaultComProps, props.comProps))
const visible = ref(false)
const funBodyJson = ref('')
const modelVal = defineModel()

const handleOpenDialog = () => {
  visible.value = true
  console.log(modelVal.value, 'modelVal.value')

  if (modelVal.value) {
    let startStr = `(${mergeComProps.value.params}) => {`
    funBodyJson.value = modelVal.value.slice(startStr.length).slice(0, -1)
  } else {
    funBodyJson.value = ''
  }
}
const handleClear = () => {
  funBodyJson.value = ''
  modelVal.value = ''
}
const handleSubmit = () => {
  let allFunJson = `(${mergeComProps.value.params}) => {${funBodyJson.value}}`
  modelVal.value = allFunJson
  visible.value = false
}
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
  display: flex;
  &_label {
    padding-right: 20px;
    width: 100px;
    text-align: right;
    font-weight: 550;
  }
  &_value {
    flex: 1;
    .customInput {
      margin: 10px 0;
    }
  }
  .fun_json {
    font-weight: bold;
  }
}
ul {
  margin: 0;
  padding: 0;
  li {
    margin-bottom: 10px;
  }
}
</style>
